<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标跟随生成艺术 - 原始结构版本</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #000;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: 'Courier New', monospace;
        }
        #canvas-container {
            position: relative;
        }
        .info {
            position: absolute;
            top: 10px;
            left: 10px;
            color: #fff;
            font-size: 12px;
            background: rgba(0,0,0,0.7);
            padding: 5px;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <div id="canvas-container">
        <div class="info">
            移动鼠标来控制图案位置<br>
            基于原始JavaScript代码结构
        </div>
    </div>

    <script>
        // 完全忠实于原始代码结构
        let t = 0;
        let w = 400;
        let mouseX = 200;
        let mouseY = 200;
        
        // 原始函数结构，只将固定坐标替换为鼠标位置
        let a = (y, d = mag(k = (y < 11 ? 6 + sin(pow(y, 8)) * 6 : y/5 + cos(y/2)) * cos(i - t/4), e = y/7 - 13) + sin(e/4 + t)/2) => 
            point(
                (q = y * k / d * (3 + sin(d*2 + y/2 - t*4))) + 60 * cos(c = d/2 + 1 - t/2) + mouseX, 
                q * sin(c) + d * 29 - 170 + mouseY
            );
        
        // p5.js setup函数
        function setup() {
            createCanvas(windowWidth, windowHeight);
            background(9);
            stroke(255, 96);
        }
        
        // p5.js draw函数，调用原始draw逻辑
        function draw() {
            background(9);
            
            // 更新鼠标位置（相对于画布中心）
            mouseX = pmouseX;
            mouseY = pmouseY;
            
            t += PI/120;
            
            // 完全忠实于原始代码结构，保持所有变量作用域
            for (let i = 1e4; i--;) {
                let a = (y, d = mag(k = (y < 11 ? 6 + sin(pow(y, 8)) * 6 : y/5 + cos(y/2)) * cos(i - t/4), e = y/7 - 13) + sin(e/4 + t)/2) =>
                    point(
                        (q = y * k / d * (3 + sin(d*2 + y/2 - t*4))) + 60 * cos(c = d/2 + 1 - t/2) + mouseX,
                        q * sin(c) + d * 29 - 170 + mouseY
                    );
                a(i/345);
            }
        }
        
        // 辅助函数
        function mag(x, y) {
            return sqrt(x*x + y*y);
        }
        
        // 窗口大小改变时重新调整画布
        function windowResized() {
            resizeCanvas(windowWidth, windowHeight);
            background(9);
        }
    </script>
</body>
</html>